<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" :title="lessonName">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="set-body">
            <cube-scroll :data="questionPackageList">
                <div class="set-item" @click="toQuestionDetail(index)" v-for="(questionPackage,index) in questionPackageList" :key="questionPackage.Id">
                    <div class="picture">
                        <img :src="questionPackage.Img"/>
                    </div>
                    <div class="info">
                        <div class="title ellipsis">
                            {{questionPackage.ExamName}}
                        </div>
                        <div class="desc ellipsis">
                            {{questionPackage.Summary}}
                        </div>
                        <div class="number">
                            <div class="subscription-number">
                                {{questionPackage.FavAmount || 0}}人订阅
                            </div>
                            <rate class="rate-number" :value="questionPackage.Mark || 0"></rate>
                        </div>
                        <div class="collect" @click.stop="collectSet(index)">
                            <span class="icon iconfont icon-aixin1" v-show="!questionPackage.IsFav"></span>
                            <span class="icon iconfont icon-aixin" v-show="questionPackage.IsFav"></span>
                        </div>
                        <div class="price">
                            {{questionPackage.Price}}
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import Rate from "@/components/aui/Rate.vue";


    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, Rate
        }
    })
    export default class QuestionSet extends Scene {
        private lessonName: string = "";
        private questionPackageList: object[] = [];

        @State("UserStore")
        public user!: InterfaceUser;


        private back(): void {
            this.navigateBack();
        }

        private mounted(): void {
            this.lessonName = this.$route.query.lessonName as string;
            if (this.lessonName === "") {
                this.navigateBack();
            }

            this.getQuestionPackageList();
        }

        private collectSet(i: number) {
            Http.get(this.api.favoriteQuestionPackage, CommonUnit.argumentWithUser(this.user, {flag: !(<any> this).questionPackageList[i].IsFav, packageid: (<any> this).questionPackageList[i].Id})).then((res) => {
                if (res.Success) {
                    (<any> this).questionPackageList[i].IsFav = !(<any> this).questionPackageList[i].IsFav;
                } else {
                    (<any> this).$createToast({
                        mask: true,
                        type: "warn",
                        time: 1500,
                        txt: res.Message,
                        onTimeout: () => {
                            if (!CommonUnit.responseLoginVerification(res)) {
                                this.navigateLoginPage();
                            }
                        }
                    }).show();
                }
            });
        }

        private toQuestionDetail(index: number) {
            this.navigateTo({
                name: "questionDetail",
                query: {
                    packageId: (<any> this).questionPackageList[index].Id,
                    type: 1
                }
            });
        }

        private async getQuestionPackageList(): Promise<any> {
            const res = await Http.get(this.api.questionPackageList, CommonUnit.argumentWithUser(this.user, {lessonName: this.lessonName}));
            if (res.Success) {
                this.questionPackageList = res.Data;
            } else {
                (<any> this).$createToast({
                    mask: true,
                    type: "warn",
                    time: 1500,
                    txt: res.Message,
                    onTimeout: () => {
                        if (!CommonUnit.responseLoginVerification(res)) {
                            this.navigateLoginPage();
                        }
                    }
                }).show();
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        background $theme-page-common-background-color;

    .set-body
        padding-top 44px;
        height 100vh;

    .set-item
        background #fff;
        padding 10px 12px;
        display flex;
        flex-direction row;
        justify-content space-between;
        border-bottom 1px solid $theme-page-common-background-color;

        .picture, .picture img
            width 75px;
            min-height 75px;
            height auto;

        .info
            width calc(100% - 90px);
            padding 4px 0;
            display flex;
            flex-direction column;
            justify-content space-between;
            position relative;

            .title
                font-size 16px;
                line-height 20px;
                height 20px;
                padding-right 25px;

            .collect
                position absolute;
                width 20px;
                height 20px;
                right 10px;
                color #f33;

            .price
                position absolute;
                bottom 5px;
                right 12px;
                font-size 20px;
                color $theme-advancing-color

                &:before
                    content '¥';
                    font-size 12px;
                    margin-right -4px;

            .desc
                height 20px;
                line-height 20px;
                margin-top 3px;
                color $theme-auxiliary-color

            .number
                height 22px;
                padding-right 75px;
                display flex;
                align-items center;

                .subscription-number
                    flex 1;
                    color $theme-auxiliary-color
                    font-size 12px;

                .rate-number
                    flex 1;
                    margin-top -20px;
</style>
